<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script th:src="@{/other/check.js}"></script>
    <style>
        #tel{
            height: 45px;
            margin-top: 15px;
            width: 350px;
            margin-left: 80px;
            font-size: 18px;
        }
        #pass{
            height: 45px;
            margin-top: 30px;
            width: 350px;
            margin-left: 80px;
            font-size: 18px;
        }
        #telResult{
            display: none;
            color: red;
            margin-top: 10px;
            margin-left: 200px;
        }
        #passResult{
            display: none;
            margin-left: 60px;
            margin-top: 10px;
            color: red;
            font-size: 11px;
        }
    </style>
</head>
<body>
<div class="login-main" style="width: 1500px;height: auto;margin-left: auto;margin-right: auto">
    <img th:src="@{/images/logo.png}" style="margin-left: 15%">
    <div style="margin-top: 200px">
        <form class="layui-form" style="margin-left: auto;margin-right: auto;width: 500px;padding: 20px;height: 280px;background-color: #00F7DE;border-radius: 5px">
            <h1 class="layui-elip" style="margin-left: 40%">用户登录</h1>
            <div class="layui-input-inline">
                <input id="tel" onblur="telCheck()" type="text" name="tel" maxlength="11" required lay-verify="required" placeholder="手机号" class="layui-input" autocomplete="off">
                <p id="telResult" class="layui-anim layui-anim-scaleSpring">手机号格式有误！</p>
            </div><br>
            <div class="layui-input-inline">
                <input id="pass" onblur="passCheck()" type="password" name="password" required lay-verify="required" placeholder="密码" class="layui-input" autocomplete="off">
                <p id="passResult" class="layui-anim layui-anim-scaleSpring">密码格式有误，输入8-16位密码 至少包含一个数字和一个字母</p>
            </div><br>
            <div class="layui-input-inline login-btn" style="margin-top: 20px">
                <button lay-submit lay-filter="login" 	class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal layui-anim-scalesmall" style="margin-left: 110px;margin-top: 15px;width: 100px">登录</button>
                <a href="/index/register" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-danger layui-anim-scalesmall" style="margin-left: 80px;margin-top: 15px;width: 100px">新用户</a>
            </div>
        </form>
    </div>

    <footer style="margin-top: 200px;margin-left: 43%">Copyright© Design By leileiMann</footer>
</div>

<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script>

    layui.use("form",function () {
        var form = layui.form;
        var $ = layui.$;
        //监听提交
        form.on("submit(login)",function (data) {
            $.ajax({
                url:"/user/toLogin",
                type:"POST",
                data:data.field,
                dataType:"json",
                success: function (result) {
                    if(result.code == "1"){
                        layer.msg(result.msg,{icon:result.icon,anim:result.anim},function () {
                            location.href = '/index/view';    //登录成功，转向带用户名的主页
                        });
                    }else{
                        layer.msg(result.msg,{icon:result.icon,anim:result.anim});
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
















